<template>
  <div class="forget-container">
    <img
      class="login-logo"
      src="@/assets/img/login/logo-orange.png"
    >
    <div
      v-if="!editSuccess"
      class="edit-container"
    >
      <div class="edit-img">
        <img
          src="@/assets/img/login/edit.png"
          alt=""
        >
      </div>
      <fks-form
        ref="form"
        label-position="left"
        :model="form"
        label-width="110px"
        :rules="rules"
      >
        <fks-form-item
          :label="LANG.PHONE"
          class="form-group"
          prop="phone"
        >
          <fks-input
            v-model="form.phone"
            class="login-input"
            type="text"
            maxlegth="11"
            :placeholder="LANG.PHONE_TIP"
            oninput="value=value.replace(/[^\d]/g,'')"
            @keyup.native.enter="goEditPassword"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.CAPTCHA"
          class="login-input tel_code"
          prop="captcha"
        >
          <fks-input
            v-model="form.captcha"
            maxlength="50"
            :placeholder="LANG.ACCOUNT_CAPTCAH"
          >
            <fks-button
              slot="append"
              type="primary"
              :loading="smsLoading"
              @click="getSMSCaptcha"
            >
              <span
                v-if="countDown != -1 && countDown != -2"
                class="word"
              >{{
                countDown + 's'
              }}</span>
              <span
                v-if="countDown != -1 || countDown != -2"
                class="word"
              >{{
                countDown == -2 ? LANG.GET_CAPTCHA : LANG.REGAIN_CAPTCHA
              }}</span>
            </fks-button>
          </fks-input>
        </fks-form-item>
        <fks-form-item
          class="login-input"
          prop="pwd"
        >
          <span slot="label">
            {{ LANG.NEW_PASSWORD }}
            <fks-tooltip placement="right">
              <div
                slot="content"
                style="font-size: 14px; line-height: 20px"
                class="tips-container"
              >
                <span style="font-size: 14px">
                  {{ LANG.PASSWORD_TIP }}{{ accountConfig.pwMinLength }}-{{
                    accountConfig.pwMaxLength
                  }}
                </span>
                <span
                  v-if="
                    accountConfig.charDemand == '1' &&
                      accountConfig.passwordLevel == 'custom'
                  "
                >{{ LANG.PASSWORD_TIP1 }}</span>
                <span
                  v-if="
                    accountConfig.charDemand == '2' &&
                      accountConfig.passwordLevel == 'custom'
                  "
                >{{ LANG.PASSWORD_TIP2 }}</span>
                <span
                  v-if="
                    accountConfig.charDemand == '3' &&
                      accountConfig.passwordLevel == 'custom'
                  "
                >{{ LANG.PASSWORD_TIP3 }}</span>
                <span v-if="accountConfig.sensitiveInfo == true">{{
                  LANG.SENSITIVE_INFO_TIP
                }}</span>
              </div>
              <i class="fks-icon-question" />
            </fks-tooltip>
          </span>
          <fks-input
            v-model="form.pwd"
            show-password
            maxlength="50"
            :placeholder="LANG.ENTER_NEW_PASSWORD"
          />
        </fks-form-item>
        <fks-form-item
          class="login-input"
          :label="LANG.CONFIRM_PASSWORD"
          prop="confirmpwd"
        >
          <fks-input
            v-model="form.confirmpwd"
            show-password
            maxlength="50"
            :placeholder="LANG.ENTER_CONFIRM_PASSWORD"
            @keyup.native.enter="submit()"
          />
        </fks-form-item>
      </fks-form>
      <div class="btn-container">
        <fks-button
          :loading="submitLoading"
          type="primary"
          @click="submit()"
        >
          {{ LANG.CONFIRM_EDIT_PASSWORD }}
        </fks-button>
        <fks-button
          text
          class="back"
          @click="backToLogin"
        >
          {{ LANG.BACK_TO_LOGIN }}
        </fks-button>
      </div>
    </div>
    <div
      v-if="editSuccess"
      class="edit-container"
    >
      <div class="edit-img">
        <img
          src="@/assets/img/login/success.png"
          alt=""
        >
      </div>
      <div style="text-align: center">
        {{ LANG.RESET_SUCCESS }}
      </div>
      <div class="btn-container">
        <fks-button
          type="primary"
          @click="backToLogin"
        >
          {{ LANG.BACK_TO_LOGIN }}
        </fks-button>
      </div>
    </div>
  </div>
</template>
<script>
import { editPassword, getSms } from './api'
import { pwdEncrypt } from '@/utils/encryption/pwd'
import * as stateTypes from '@/store/State/stateTypes'
import { mapState } from 'vuex'
import { pwdRuleCheck } from '@/utils/password'
export default {
  name: 'Login',
  data() {
    return {
      editSuccess: false,
      form: {
        phone: '',
        captcha: '',
        pwd: '',
        confirmpwd: ''
      },
      countDown: -2,
      smsLoading: false,
      captcha_key: '',
      submitLoading: false
    }
  },
  computed: {
    rules() {
      return {
        phone: [
          {
            required: true,
            message: this.LANG.PHONE_NOT_EMPTY,
            trigger: 'blur'
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: this.LANG.FORMAT_ERROR
          }
        ],
        captcha: [
          {
            required: true,
            message: this.LANG.CAPTCHA_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        pwd: [
          {
            required: true,
            message: this.LANG.NEW_PASSWORD_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        confirmpwd: [
          {
            required: true,
            message: this.LANG.CONFIRM_PASSWORD_NOT_EMPTY,
            trigger: 'blur'
          }
        ]
      }
    },
    ...mapState([stateTypes.ACCOUNT_CONFIG])
  },
  methods: {
    //返回登录页
    backToLogin() {
      this.$router.push('/login')
    },
    //提交重置密码数据操操作
    submit() {
      this.submitLoading = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (pwdRuleCheck(this.form.pwd)) {
            if (this.form.confirmpwd != this.form.pwd) {
              this.submitLoading = false
              return this.$message.error(this.LANG.CONFIRM_NEW_PWD_TIP)
            }
            editPassword({
              captcha: this.form.captcha,
              key: this.captcha_key,
              phone: this.form.phone,
              pwd: pwdEncrypt(this.form.pwd)
            })
              .then((res) => {
                this.submitLoading = false
                if (res.status) {
                  this.$message.success(this.LANG.EDIT_PASSWORD_SUCCESS)
                  this.editSuccess = true
                } else {
                  this.$refs.form.resetFields()
                }
              })
              .catch(() => {
                this.submitLoading = false
              })
          } else {
            this.submitLoading = false
            this.$message.error(this.LANG.PASSWORD_VALID_TIP)
          }
        } else {
          this.submitLoading = false
        }
      })
    },
    //获取短信验证码
    getSMSCaptcha() {
      if (this.countDown < 0 && this.form.phone) {
        this.validateText = ''
        this.smsLoading = true
        getSms({ phone: this.form.phone })
          .then((res) => {
            this.smsLoading = false
            if (res.status) {
              this.captcha_key = res.data
              this.updataCountDown()
            } else {
              this.updataCountDown()
              this.$message.error(res.message)
            }
          })
          .catch((err) => {
            this.smsLoading = false
            this.$message.error(err.message)
            this.updataCountDown()
          })
      } else {
        if (this.countDown < 0) {
          this.$message.warning(this.LANG.PHONE_NOT_EMPTY)
        }
      }
    },
    //更新获取短信验证码的时间
    updataCountDown() {
      this.smsLoading = false
      this.countDown = 60
      const count = setInterval(() => {
        if (this.countDown == 0) {
          clearInterval(count)
          this.countDown = -1
        } else {
          this.countDown--
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.forget-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .login-logo {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 100px;
  }

  .edit-container {
    width: 370px;

    .edit-img {
      margin-bottom: 28px;
      text-align: center;
    }

    ::v-deep .login-input {
      .fks-input__inner {
        height: 40px;
        padding-right: 0;
        padding-left: 0;
        border: 1px solid rgba(225, 226, 228, 1);
        border-radius: 4px;
        font-size: 14px;
        text-indent: 16px;
        background: rgba(255, 255, 255, 1);
      }
    }

    ::v-deep .tel_code {
      .fks-input__inner {
        width: 150px;
      }

      .fks-input-group__append {
        width: 100px;
        padding: 0 15px;
        border: 1px solid var(--theme-color);
        border-radius: 4px;
        text-align: center;

        .fks-button {
          padding: 8px 10px;
        }

        .word {
          height: 19px;
          font-size: 14px;
          font-family: MicrosoftYaHei, sans-serif;
          line-height: 19px;
          color: var(--theme-color);
        }
      }
    }
  }

  .btn-container {
    margin-top: 20px;
    text-align: center;
    ::v-deep .fks-button {
      width: 340px;
      height: 55px;
      font-size: 18px;
      margin: 0;
    }

    .back {
      font-size: 14px !important;
    }
  }
}
</style>